<template>
    <div>
        <h1>父组件</h1>
        <button @click="changeShow">改变show的值</button>
        <ChildVue v-if="show"></ChildVue>
        <!-- <chlid-vue v-if="show"></chlid-vue> -->
    </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';
import ChildVue from './ChildVue.vue';


export default defineComponent({
    components: { ChildVue },
    setup() {
        let show = ref(true);
        function changeShow() {
            console.log(show);
            show.value = !show.value;

        }
        onBeforeMount(() => {
            console.log('父组件的onBeforeMount');
            console.log(this);
            
        });
        onMounted(() => {
            console.log('父组件的onMounted');
            console.log(this);
        });
        onBeforeUpdate(() => {
            console.log('父组件的onBeforeUpdate');
            console.log(this);

        });
        onUpdated(() => {
            console.log('父组件的onUpdated');
            console.log(this);

        });
        onBeforeUnmount(() => {
            console.log('父组件的onBeforeUnmount');
            console.log(this);

        });
        onUnmounted(() => {
            console.log('父组件的onUnmounted');
            console.log(this);

        });
        return {
            show,
            changeShow,
        };
    },
    beforeCreate() {
        console.log('父组件的beforeCreate');
        console.log(this);
        console.log(this.info);
        console.log(this.show);
        
        

    },
    created() {
        console.log('父组件的created');
        console.log(this);
        console.log(this.info);
        console.log(this.show);

    },
    beforeMount() {
        console.log('父组件的beforeMount');

    },
    mounted() {
        console.log('父组件的mounted');

    },
    beforeUpdate() {
        console.log('父组件的beforeUpdate');

    },
    updated() {
        console.log('父组件的updated');

    },
    beforeUnmount() {
        console.log('父组件的beforeUnmount');

    },
    unmounted() {
        console.log('父组件的unmounted');

    },
});
</script>

<style scoped>

</style>